import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { DescItemDto } from '@/components/render-descriotion/Index'
import RenderDescription from '@/components/render-descriotion/Index'
import { EditOutlined, InfoCircleOutlined, UserOutlined } from '@ant-design/icons-vue'
import { getCompanyDetail, updateSaasCompany } from '@/api/company'
import { Button, message } from 'ant-design-vue'
import ToolTipText from '@/components/tooltip-text/Index'
import type { CompanyProductInfoDto, PayWageInfoDto } from '@/api/company/types'
import renderModal, { getModelValue, type FormModalDto } from '@/components/modal/Modal'
import { alipayWithdraw } from '@/api/customer'
@Component
export class BasicInfo extends Render {
    @Prop() paywageInfo!: PayWageInfoDto

    @Emit('refresh')
    handleRefresh() {}

    get clientInfoData() {
        return [
            {
                label: '开通时间',
                value: this.paywageInfo?.payProductOpenTime,
            },
            {
                label: '发薪总额',
                value: this.paywageInfo?.patMoneyCount,
            },
            {
                label: '归属商务',
                value: <ToolTipText text={this.paywageInfo?.saleName ?? ''} content={this.paywageInfo?.salePhone ?? ''} />,
            },
            {
                label: '到期时间',
                value: this.paywageInfo?.accountExpireTime,
            },
            {
                label: '超级管理员',
                value: <ToolTipText text={this.paywageInfo?.superParentName ?? ''} content={this.paywageInfo?.phone ?? ''} />,
            },
            {
                label: '收款渠道',
                value: this.paywageInfo?.channelName
            },
            {
                label: '微信商户余额',
                value: this.paywageInfo?.payAccountBalance
            },
            {
                label: '企业支付宝余额',
                value: <div class="flex items-center">
                    <span class="text-yellow-100 mr-5px">¥{this.paywageInfo?.payAlipayAccountBalance}</span>
                    <Button size='small' type="primary" ghost onClick={() => this.withdrawFormConfig.show = true}>提现</Button>
                </div>
            },
            {
                label: '收款账户',
                value: this.paywageInfo?.bankName
            },
            {
                label: '单日额度',
                value: <div class="flex items-center">
                    <span class="mr-5px">{this.paywageInfo?.dailyQuota ?? 0}</span>
                    <div class="cursor-pointer" onClick={() => this.dailyQuotaFormConfig.show = true}>
                        <EditOutlined />
                    </div>
                </div>
            },
            {
                label: '单日可领额度',
                value:  <div class="flex items-center">
                    <span class="mr-5px">{this.paywageInfo?.personSingleQuota ?? 0}</span>
                    <div class="cursor-pointer" onClick={() => this.singleQuatoFormConfig.show = true}>
                        <EditOutlined />
                    </div>
                </div>
            },
            {
                label: '客户充值账号',
                value: this.paywageInfo?.merchantBankCard
            },
        ] as DescItemDto[]
    }

    // async getData() {
    //     const res = await getCompanyDetail({
    //         id: this.companyId
    //     })
    // }

    // onMounted() {
    //     // this.getData()
    // }

    // 修改单日额度
    dailyQuotaFormConfig = this.initDailyQuotaFormConfig() as FormModalDto
    initDailyQuotaFormConfig() {
        return {
            title: '修改单日额度',
            width: '450px',
            theme: 'light',
            show: false,
            items: {
                dailyQuota: {
                    name: '单日额度',
                    element: 'input',
                    params: {
                        inputType: 'number',
                    },
                    required: true,
                },
            },
            complete: async () => {
                const data = getModelValue(this.dailyQuotaFormConfig)
                data.id = this.paywageInfo.companyId
                await updateSaasCompany(data)
                console.log(111, data)
                message.success('编辑成功')
                this.dailyQuotaFormConfig.show = false
                this.handleRefresh()
            },
            cancel: () => {
                this.dailyQuotaFormConfig.show = false
            },
            init: async () => {
            }
        } as FormModalDto
    }


    // // 修改单日额度
    singleQuatoFormConfig = this.initSingleQuotaFormConfig() as FormModalDto
    initSingleQuotaFormConfig() {
        return {
            title: '修改单日可领额度',
            width: '450px',
            theme: 'light',
            show: false,
            items: {
                personSingleQuota: {
                    name: '单日可领额度',
                    element: 'input',
                    params: {
                        inputType: 'number',
                    },
                    required: true,
                },
            },
            complete: async () => {
                const data = getModelValue(this.singleQuatoFormConfig)
                data.id = this.paywageInfo.companyId
                // await alipayWithdraw(data)
                await updateSaasCompany(data)
                message.success('修改成功')
                this.singleQuatoFormConfig.show = false
                this.handleRefresh()
            },
            cancel: () => {
                this.singleQuatoFormConfig.show = false
            },
            init: async () => {
            }
        } as FormModalDto
    }
    


    // 账户余额提现
    withdrawFormConfig = this.initWithdrawFormConfig() as FormModalDto
    initWithdrawFormConfig() {
        return {
            title: '支付宝账户提现',
            width: '450px',
            theme: 'light',
            show: false,
            items: {
                amount: {
                    name: '提现金额',
                    element: 'input',
                    params: {
                        inputType: 'number',
                    },
                    required: true,
                },
            },
            complete: async () => {
                const data = getModelValue(this.withdrawFormConfig)
                data.companyId = this.paywageInfo.companyId
                await alipayWithdraw(data)
                message.success('提现成功')
                this.withdrawFormConfig.show = false
                this.handleRefresh()
            },
            cancel: () => {
                this.withdrawFormConfig.show = false
            },
            init: async () => {
            }
        } as FormModalDto
    }

    render() {
        return <div>
            <div class="flex items-center mb-20px">
                <UserOutlined />
                <div class="text-black-200 font-bold ml-8px">发薪专户资料</div>
            </div>
            <RenderDescription labelWidth={140} renderData={this.clientInfoData} />
            {renderModal(this.dailyQuotaFormConfig)}
            {renderModal(this.singleQuatoFormConfig)}
            {renderModal(this.withdrawFormConfig)}
        </div>
    }
}

export default toNative<{paywageInfo: PayWageInfoDto, companyProductInfo: CompanyProductInfoDto}, { refresh: () => void}>(BasicInfo)